<template>
	<view class="content">
		<view class="row1">
			<view class="row1_title">提现金额:</view>
			<view class="row1_input"><input type="number" placeholder="请输入提现金额" v-model="money"/></view>
		</view>
		<view class="row2">
			<view class="row2_text">当前账户余额：¥{{allMoney}}</view>
			<view class="row2_btn" @click="all">全部</view>
		</view>
		<view class="row3">
			<view class="row3_item1">提现至：</view>
			<radio-group @change="radioChange">
				<view class="row3_item" v-for="(item, index) in items" :key="item.value">
					<view class="row3_item_letf">
						<i :class="item.class"></i>
						<text>{{item.text}}</text>
					</view>
					<view class="row3_item_rgith">
						<radio :value="item.value" :checked="index === current" />
					</view>
				</view>
			</radio-group>
			<navigator hover-class="false" class="row3_item" url="addBankcard">
				<view class="row3_item_letf">
					<i class="iconfont iconyinhangka icon-styl3"></i>
					<text>银行卡</text>
					<text class="addCard">暂无银行卡，前往添加银行卡</text>
				</view>
				<view class="row4_item_rgith">
					<i class="iconfont iconjiantou icon-styl5"></i>
				</view>
			</navigator>
		</view>
		<view class="btn">提现</view>
	</view>
</template>

<script>
		export default {
		data() {
			return {
				items: [
					{
						class: 'iconfont iconzhifubao icon-styl1',
						text: '支付宝',
						value: '支付宝'
					},{
						class: 'iconfont iconweixinzhifu icon-styl2',
						text: '微信',
						value: '微信'
					}
				],
				current: 0,
				money: '',
				allMoney: 120.2
			}
		},
		methods: {
			radioChange(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			},
			all() {
				this.money = this.allMoney;
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(243, 243, 243, 1);
	}

	.row1 {
		width: 100%;
		padding-left: 30upx;
		height: 83upx;
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
	}

	.row1_title {
		width: 165upx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		font-size: 34upx;
	}

	.row1_input {
		font-size: 34upx;
	}

	.row2 {
		width: 92%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		height: 78upx;
		align-items: center;
	}

	.row2_text {
		line-height: 78upx;
		color: #666666;
		font-size: 26upx;
		letter-spacing: 3upx;
	}

	.row2_btn {
		width: 78upx;
		height: 50upx;
		line-height: 50upx;
		background: #FF9900;
		border-radius: 8upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
	}

	.row3 {
		width: 100%;
		height: 388upx;
		background: #FFFFFF;
	}

	.row3_item1 {
		height: 80upx;
		line-height: 70upx;
		letter-spacing: 3upx;
		padding-left: 30upx;
		color: #333333;
		font-size: 32upx;
	}

	.row3_item_letf {
		display: flex;
		justify-content: flex-start;
		height: 101upx;
		line-height: 101upx;
	}

	.row3_item_letf text {
		color: #333333;
		font-size: 34upx;
		letter-spacing: 3upx;
	}

	.row3_item {
		width: 92%;
		margin: auto;
		height: 101upx;
		line-height: 101upx;
		display: flex;
		justify-content: space-between;
		border-top: 2upx solid rgba(229, 229, 229, 0.6);
	}

	.row3 .row3_item:first-child {
		border: none;
	}

	.row3_item_rgith {
		height: 101upx;
		line-height: 101upx;

	}

	.row3_item_rgith radio {
		transform: scale(0.75);
	}

	.row3_item_rgith .wx-radio-input.wx-radio-input-checked {
		border: 1px solid #FF9900 !important;
		background: #FF9900 !important;
	}

	.row4_item_rgith {
		color: #999999;
		font-size: 28upx;
		letter-spacing: 3upx;
		height: 101upx;
		line-height: 101upx;
		display: flex;
		justify-content: flex-start;
	}

	.icon-styl1 {
		font-size: 50upx;
		margin-right: 15upx;
		line-height: 108upx;
		color: #1296DB;
	}
	.icon-styl2 {
		font-size: 50upx;
		margin-right: 15upx;
		line-height: 108upx;
		color: #41B035;
	}
	.icon-styl3 {
		font-size: 50upx;
		margin-right: 15upx;
		line-height: 108upx;
		color:#2F77F1 ;
	}
	.icon-styl5{
		color: #999999;
		display: inline-flex;
		line-height: 98upx !important;
	}
	.addCard{
		font-size: 28upx !important;
		color: #999999 !important;
		display: inline-flex;
		position: absolute;
		right: 100upx;
	}
	i{
		font-size: 50upx;
		margin-right: 15upx;
		line-height: 108upx;
	}
	.qwert {
		color: #999999;
		font-size: 36upx;
		line-height: 101upx;
	}

	.btn {
		width: 92%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: auto;
		margin-top: 62upx;
		font-size: 34upx;
		color: #FFFFFF;
		background: #FF9900;
		border-radius: 8upx;
	}
</style>
